import React, { useState } from 'react';
import { 
  Users, Target, ArrowRight, CheckCircle, Clock, AlertTriangle,
  FileText, BarChart3, Settings, Workflow, Database, Shield
} from 'lucide-react';

const WorkbenchUserScenarios = ({ onNavigate }) => {
  const [activeScenario, setActiveScenario] = useState('overview');

  // 用户角色定义
  const userRoles = [
    {
      id: 'esg-manager',
      name: 'ESG经理',
      description: '负责整体ESG数据管理和报告',
      responsibilities: ['数据质量监控', '报告审核', '合规检查', '策略制定'],
      pain_points: ['数据分散难以汇总', '报告制作耗时', '合规要求频繁变化'],
      goals: ['提高数据准确性', '简化报告流程', '确保合规性']
    },
    {
      id: 'data-analyst',
      name: '数据分析师',
      description: '专注于ESG数据分析和洞察挖掘',
      responsibilities: ['数据录入', '数据清洗', '趋势分析', '可视化报告'],
      pain_points: ['数据录入重复性高', '缺乏实时分析工具', '数据质量问题'],
      goals: ['自动化数据处理', '实时监控指标', '提供决策支持']
    },
    {
      id: 'compliance-officer',
      name: '合规专员',
      description: '确保ESG活动符合法规要求',
      responsibilities: ['合规审核', '风险评估', '政策解读', '培训管理'],
      pain_points: ['法规更新频繁', '审核流程复杂', '文档管理混乱'],
      goals: ['自动化合规检查', '风险预警', '流程标准化']
    }
  ];

  // 核心用户场景
  const coreScenarios = [
    {
      id: 'data-management',
      title: '数据录入与管理',
      description: '用户需要高效地录入、编辑和管理各类ESG数据',
      user_story: '作为ESG数据分析师，我希望能够快速录入和批量导入ESG数据，以便提高工作效率并减少错误率',
      acceptance_criteria: [
        '支持单条和批量数据录入',
        '提供数据验证和错误提示',
        '支持Excel/CSV文件导入',
        '具备数据预览和确认机制',
        '记录数据变更历史'
      ],
      business_value: '提高数据录入效率60%，减少人工错误80%',
      priority: 'P0',
      effort: '8人天'
    },
    {
      id: 'approval-workflow',
      title: '审批流程管理',
      description: '建立标准化的数据审核和审批流程',
      user_story: '作为ESG经理，我希望建立标准化的审批流程，确保数据质量和合规性',
      acceptance_criteria: [
        '支持多级审批流程配置',
        '提供审批状态实时跟踪',
        '支持审批意见和附件',
        '具备审批超时提醒',
        '记录完整审批历史'
      ],
      business_value: '提高审批效率40%，确保数据质量100%合规',
      priority: 'P0',
      effort: '12人天'
    },
    {
      id: 'dashboard-monitoring',
      title: '实时监控仪表盘',
      description: '提供关键指标的实时监控和可视化展示',
      user_story: '作为ESG经理，我希望通过仪表盘实时查看关键指标，及时发现异常并采取行动',
      acceptance_criteria: [
        '显示关键ESG指标实时数据',
        '提供多维度数据筛选',
        '支持自定义仪表盘布局',
        '具备异常预警功能',
        '支持数据下钻分析'
      ],
      business_value: '提高决策响应速度70%，降低风险发生率50%',
      priority: 'P1',
      effort: '10人天'
    },
    {
      id: 'report-generation',
      title: '报告自动生成',
      description: '自动化生成各类ESG报告，支持多种格式导出',
      user_story: '作为ESG经理，我希望系统能够自动生成标准化报告，减少手工制作时间',
      acceptance_criteria: [
        '支持多种报告模板',
        '提供报告自定义功能',
        '支持定时自动生成',
        '多格式导出(PDF/Excel/Word)',
        '报告分发和共享功能'
      ],
      business_value: '减少报告制作时间80%，提高报告质量和一致性',
      priority: 'P1',
      effort: '15人天'
    }
  ];

  // 业务流程场景
  const businessFlows = [
    {
      id: 'daily-operation',
      title: '日常操作流程',
      steps: [
        { step: 1, title: '登录系统', description: '用户登录工作台，查看当日任务', actor: 'data-analyst' },
        { step: 2, title: '数据录入', description: '录入或导入新的ESG数据', actor: 'data-analyst' },
        { step: 3, title: '数据验证', description: '系统自动验证数据完整性和准确性', actor: 'system' },
        { step: 4, title: '提交审核', description: '提交数据到审核流程', actor: 'data-analyst' },
        { step: 5, title: '审核处理', description: '审核人员检查并审核数据', actor: 'esg-manager' },
        { step: 6, title: '数据确认', description: '审核通过，数据正式入库', actor: 'system' }
      ]
    },
    {
      id: 'monthly-report',
      title: '月度报告流程',
      steps: [
        { step: 1, title: '数据汇总', description: '系统自动汇总月度数据', actor: 'system' },
        { step: 2, title: '报告生成', description: '基于模板自动生成月度报告', actor: 'system' },
        { step: 3, title: '报告审核', description: 'ESG经理审核报告内容', actor: 'esg-manager' },
        { step: 4, title: '报告调整', description: '根据审核意见调整报告', actor: 'data-analyst' },
        { step: 5, title: '最终确认', description: '确认报告并准备发布', actor: 'esg-manager' },
        { step: 6, title: '报告分发', description: '将报告分发给相关stakeholders', actor: 'system' }
      ]
    }
  ];

  const renderUserRoles = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Users className="h-12 w-12 text-blue-600 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-gray-900 mb-2">目标用户角色</h2>
        <p className="text-gray-600">工作台主要服务的用户群体及其需求分析</p>
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {userRoles.map((role) => (
          <div key={role.id} className="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
            <div className="flex items-center mb-4">
              <div className="bg-blue-100 p-2 rounded-lg mr-3">
                <Users className="h-6 w-6 text-blue-600" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900">{role.name}</h3>
                <p className="text-sm text-gray-600">{role.description}</p>
              </div>
            </div>
            
            <div className="space-y-4">
              <div>
                <h4 className="font-medium text-gray-900 mb-2">主要职责</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  {role.responsibilities.map((resp, idx) => (
                    <li key={idx} className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" />
                      {resp}
                    </li>
                  ))}
                </ul>
              </div>
              
              <div>
                <h4 className="font-medium text-gray-900 mb-2">痛点问题</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  {role.pain_points.map((pain, idx) => (
                    <li key={idx} className="flex items-center">
                      <AlertTriangle className="h-4 w-4 text-red-500 mr-2 flex-shrink-0" />
                      {pain}
                    </li>
                  ))}
                </ul>
              </div>
              
              <div>
                <h4 className="font-medium text-gray-900 mb-2">目标期望</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  {role.goals.map((goal, idx) => (
                    <li key={idx} className="flex items-center">
                      <Target className="h-4 w-4 text-blue-500 mr-2 flex-shrink-0" />
                      {goal}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const renderCoreScenarios = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Target className="h-12 w-12 text-green-600 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-gray-900 mb-2">核心用户场景</h2>
        <p className="text-gray-600">基于用户需求分析的核心功能场景设计</p>
      </div>
      
      <div className="space-y-6">
        {coreScenarios.map((scenario) => (
          <div key={scenario.id} className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-start justify-between mb-4">
              <div className="flex-1">
                <div className="flex items-center mb-2">
                  <h3 className="text-xl font-semibold text-gray-900 mr-3">{scenario.title}</h3>
                  <span className={`px-2 py-1 text-xs font-semibold rounded-full ${
                    scenario.priority === 'P0' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
                  }`}>
                    {scenario.priority}
                  </span>
                </div>
                <p className="text-gray-600 mb-4">{scenario.description}</p>
              </div>
              <div className="text-right text-sm text-gray-500">
                <div>预估工作量</div>
                <div className="font-semibold">{scenario.effort}</div>
              </div>
            </div>
            
            <div className="bg-blue-50 p-4 rounded-lg mb-4">
              <h4 className="font-medium text-blue-900 mb-2">用户故事</h4>
              <p className="text-blue-800 italic">"{scenario.user_story}"</p>
            </div>
            
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>
                <h4 className="font-medium text-gray-900 mb-3">验收标准</h4>
                <ul className="space-y-2">
                  {scenario.acceptance_criteria.map((criteria, idx) => (
                    <li key={idx} className="flex items-start">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2 mt-0.5 flex-shrink-0" />
                      <span className="text-sm text-gray-700">{criteria}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <div>
                <h4 className="font-medium text-gray-900 mb-3">商业价值</h4>
                <div className="bg-green-50 p-3 rounded-lg">
                  <p className="text-green-800 text-sm font-medium">{scenario.business_value}</p>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const renderBusinessFlows = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Workflow className="h-12 w-12 text-purple-600 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-gray-900 mb-2">业务流程场景</h2>
        <p className="text-gray-600">关键业务流程的详细步骤和交互设计</p>
      </div>
      
      <div className="space-y-8">
        {businessFlows.map((flow) => (
          <div key={flow.id} className="bg-white rounded-lg shadow-md p-6">
            <h3 className="text-xl font-semibold text-gray-900 mb-6">{flow.title}</h3>
            
            <div className="space-y-4">
              {flow.steps.map((step, idx) => (
                <div key={step.step} className="flex items-start">
                  <div className="flex flex-col items-center mr-4">
                    <div className="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-semibold">
                      {step.step}
                    </div>
                    {idx < flow.steps.length - 1 && (
                      <div className="w-px h-8 bg-blue-200 mt-2"></div>
                    )}
                  </div>
                  
                  <div className="flex-1 pb-4">
                    <div className="flex items-center justify-between mb-2">
                      <h4 className="font-medium text-gray-900">{step.title}</h4>
                      <span className={`px-2 py-1 text-xs rounded-full ${
                        step.actor === 'system' ? 'bg-gray-100 text-gray-800' :
                        step.actor === 'esg-manager' ? 'bg-purple-100 text-purple-800' :
                        'bg-blue-100 text-blue-800'
                      }`}>
                        {step.actor === 'system' ? '系统' :
                         step.actor === 'esg-manager' ? 'ESG经理' : '数据分析师'}
                      </span>
                    </div>
                    <p className="text-gray-600 text-sm">{step.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <div className="bg-gradient-to-br from-emerald-50 to-white min-h-screen">
      {/* 紧凑的标签导航 */}
      <div className="bg-white/80 backdrop-blur-sm shadow-sm border-b border-emerald-200/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <nav className="flex space-x-1 py-2">
            <button
              onClick={() => setActiveScenario('overview')}
              className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                activeScenario === 'overview'
                  ? 'bg-emerald-500 text-white shadow-md'
                  : 'text-gray-600 hover:bg-emerald-50 hover:text-emerald-600'
              }`}
            >
              <Users className="h-4 w-4" />
              <span>用户角色</span>
            </button>
            <button
              onClick={() => setActiveScenario('scenarios')}
              className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                activeScenario === 'scenarios'
                  ? 'bg-emerald-500 text-white shadow-md'
                  : 'text-gray-600 hover:bg-emerald-50 hover:text-emerald-600'
              }`}
            >
              <Target className="h-4 w-4" />
              <span>核心场景</span>
            </button>
            <button
              onClick={() => setActiveScenario('flows')}
              className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                activeScenario === 'flows'
                  ? 'bg-emerald-500 text-white shadow-md'
                  : 'text-gray-600 hover:bg-emerald-50 hover:text-emerald-600'
              }`}
            >
              <Workflow className="h-4 w-4" />
              <span>业务流程</span>
            </button>
          </nav>
        </div>
      </div>

      {/* 主内容区域 - 紧凑布局 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {activeScenario === 'overview' && renderUserRoles()}
        {activeScenario === 'scenarios' && renderCoreScenarios()}
        {activeScenario === 'flows' && renderBusinessFlows()}
      </div>
    </div>
  );
};

export default WorkbenchUserScenarios; 